<template>
	<view class="container">
		<!-- <navbar bg-color="#E72A2A00" style="opacity: 0;" title="课程" :isSlot="true" color="#ffffff"></navbar> -->
		<view class="user-content" :style="{ paddingTop: topHeight + 'px' }">
			<view class="top-info">
				<image class="top-bg" :src="$img_path('/mine/bg.png')" mode="widthFix"></image>
				<view class="user" @click="toInfo">
					<image :src="$img_base_url(userInfo ? userInfo.avatar : '')" mode="aspectFill"></image>
					<view class="info" v-if="userInfo">
						<view class="name">
							{{ userInfo.nickname }}
						</view>
						<view class="phone">
							{{ userInfo.mobile }}
						</view>
					</view>
				</view>
			</view>
			<view class="my_box_1">
				<view class="item" @click="navTo('/pagesMine/mine/Collection/Collection')">
					<image :src="$img_base_url('/mine/sc.png')" mode="widthFix"></image>
					<text>我的收藏</text>
				</view>
				<view class="item" @click="navTo('/pagesMine/mine/Tracks/Tracks')">
					<image :src="$img_base_url('/mine/zj.png')" mode="widthFix"></image>
					<text>我的足迹</text>
				</view>
				<view class="item" @click="switchTo('/pagesMall/shopingCart/shopingCart')">
					<image :src="$img_base_url('/mine/gwc.png')" mode="widthFix"></image>
					<text>我的购物车</text>
				</view>
				<view class="item" @click="navTo('/pagesMine/message/msgModules/msgModules')">
					<image :src="$img_base_url('/mine/xx.png')" mode="widthFix"></image>
					<text>我的消息</text>
				</view>
			</view>
		</view>
		<view class="model-box" v-if="userInfo">
			<view class="wallet" @click="navTo('/pagesMine/myWallet/index')">
				<image class="box-bg" :src="$img_base_url('/mine/box_bg.png')" mode="scaleToFill"></image>
				<view class="left">
					<view class="num"> <text>￥</text>{{ userInfo.money || "" }} </view>
					<text>我的钱包</text>
				</view>
				<view class="right">
					<image class="btn-bg" :src="$img_base_url('/mine/btn.png')" mode="scaleToFill"></image>
					<text>充值</text>
				</view>
			</view>

			<view class="my-box box-2">
				<view class="title">
					<text>我的服务包</text>
					<view class="right" @click="navTo('/pagesMine/servicePackage/index/index')">
						<text>点击进入</text>
						<image :src="$img_path('/mine/chevron_right.png')" mode="widthFix"></image>
					</view>
				</view>

				<view class="m-list">
					<view class="m-item" @click="goPage('/pages/orderList/orderList?titleType=2', { tabbarPage: 1 })">
						<image :src="$img_base_url('/mine/icon_2_1.png')" mode="widthFix"></image>
						<text>委托订单</text>
					</view>
					<view class="m-item" @click="toH5Url('pagesCourse/myCourse/list')">
						<image :src="$img_base_url('/mine/icon_2_2.png')" mode="widthFix"></image>
						<text>我的课程</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/shopGoodsOrder/list/list')">
						<image :src="$img_base_url('/mine/icon_2_3.png')" mode="widthFix"></image>
						<text>商品订单</text>
					</view>
					<view class="m-item" @click="navTo('/pages/orderList/orderList')">
						<image :src="$img_base_url('/mine/icon_2_4.png')" mode="widthFix"></image>
						<text>服务订单</text>
					</view>
				</view>
			</view>

			<view class="my-box box-3">
				<view class="title">
					<text>更多工具</text>
				</view>
				<view class="m-list">
					<view class="m-item" @click="navTo('/pagesMine/myEvaluation/index')">
						<image :src="$img_base_url('/mine/icon_3_1.png')" mode="widthFix"></image>
						<text>我的评价</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/share/index')">
						<image :src="$img_base_url('/mine/icon_3_2.png')" mode="widthFix"></image>
						<text>分享有礼</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/helpAndCustomerService/helpAndCustomerService')">
						<image :src="$img_base_url('/mine/icon_3_3.png')" mode="widthFix"></image>
						<text>帮助与客服</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/feedback/feedback')">
						<image :src="$img_base_url('/mine/icon_3_4.png')" mode="widthFix"></image>
						<text>意见反馈</text>
					</view>

					<view class="m-item" @click="navTo('/pagesMine/address/index')">
						<image :src="$img_base_url('/mine/icon_3_5.png')" mode="widthFix"></image>
						<text>地址管理</text>
					</view>
					<view class="m-item" @click="navTo('/pagesService/beServiceUserList/beServiceUserList')">
						<image :src="$img_base_url('/mine/icon_3_6.png')" mode="widthFix"></image>
						<text>被服务者信息</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/supplier/apply')">
						<image :src="$img_base_url('/mine/icon_3_7.png')" mode="widthFix"></image>
						<text>供应商入驻</text>
					</view>
					<!-- <view class="m-item" @click="navTo('/pagesMine/recruit/recruit')">
						<image :src="$img_base_url('/mine/icon_3_8.png')" mode="widthFix"></image>
						<text>招募技师</text>
					</view> -->

					<view class="m-item" @click="navTo('/pagesMine/myCoupon/myCoupon')">
						<image :src="$img_base_url('/mine/icon_3_9.png')" mode="widthFix"></image>
						<text>我的优惠券</text>
					</view>
					<!-- <view class="m-item" @click="navTo('/pagesMine/exchangeCode/exchangeCode')">
						<image :src="$img_base_url('/mine/icon_3_10.png')" mode="widthFix"></image>
						<text>兑换码</text>
					</view> -->
					<!-- <view class="m-item">
						<image :src="$img_base_url('/mine/icon_3_13.png')" mode="widthFix"></image>
						<text>养老顾问</text>
					</view> -->
					<view class="m-item" @click="navTo('/pagesMine/system/index')">
						<image :src="$img_base_url('/mine/icon_3_12.png')" mode="widthFix"></image>
						<text>设置</text>
					</view>
				</view>
			</view>

			<!--  -->
			<view class="my-box box-4" v-if="userInfo.is_sqdl == 1 && userInfo.is_qydl != 1">
				<view class="title">
					<text>养老顾问</text>
				</view>
				<view class="m-list">
					<view class="m-item" @click="navTo('/pagesMine/myQrcode/myQrcode')">
						<image :src="$img_base_url('/mine/icon_4_1.png')" mode="widthFix"></image>
						<text>我的二维码</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/myCertificate/myCertificate')">
						<image :src="$img_base_url('/mine/icon_4_7.png')" mode="widthFix"></image>
						<text>我的证书</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/myIncome/myIncome')">
						<image :src="$img_base_url('/mine/icon_4_2.png')" mode="widthFix"></image>
						<text>我的收益</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/myUsers/myUsers')">
						<image :src="$img_base_url('/mine/icon_4_5.png')" mode="widthFix"></image>
						<text>我的用户</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/dataStatistics/dataStatistics')">
						<image :src="$img_base_url('/mine/icon_4_3.png')" mode="widthFix"></image>
						<text>数据统计</text>
					</view>
					<view class="m-item" @click="navTo('/pagesMine/salesOrder/salesOrder')">
						<image :src="$img_base_url('/mine/icon_4_8.png')" mode="widthFix"></image>
						<text>销售订单</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/bankCard/bankCard')">
						<image :src="$img_base_url('/mine/icon_4_6.png')" mode="widthFix"></image>
						<text>银行卡管理</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/majorClients/index')">
						<image :src="$img_base_url('/mine/icon_4_4.png')" mode="widthFix"></image>
						<text>大客户管理</text>
					</view>
				</view>
			</view>
			<!-- v-if="userInfo.is_qydl==1" -->
			<view class="my-box box-4" v-if="userInfo.is_qydl == 1">
				<view class="title">
					<text>城市合伙人</text>
				</view>
				<view class="m-list">
					<view class="m-item" @click="navTo('/pagesMine/myQrcode/myQrcode')">
						<image :src="$img_base_url('/mine/icon_5_1.png')" mode="widthFix"></image>
						<text>我的二维码</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/myIncome/myIncome')">
						<image :src="$img_base_url('/mine/icon_5_2.png')" mode="widthFix"></image>
						<text>我的收益</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/myUsers/myUsers')">
						<image :src="$img_base_url('/mine/icon_5_17.png')" mode="widthFix"></image>
						<text>我的用户</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/dataStatistics/dataStatistics')">
						<image :src="$img_base_url('/mine/icon_5_3.png')" mode="widthFix"></image>
						<text>数据统计</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/salesOrder/salesOrder')">
						<image :src="$img_base_url('/mine/icon_5_6.png')" mode="widthFix"></image>
						<text>销售订单</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/proxy/proxy')">
						<image :src="$img_base_url('/mine/icon_5_4.png')" mode="widthFix"></image>
						<text>我的代理</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/serviceManagement/list')">
						<image :src="$img_base_url('/mine/icon_5_5.png')" mode="widthFix"></image>
						<text>服务管理</text>
					</view>
					<!-- <view class="m-item" @click="navTo('/pagesRegion/staff/staff')">
						<image :src="$img_path('/mine/icon_5_8.png')" mode="widthFix"></image>
						<text>员工管理</text>
					</view> -->
					<view class="m-item" @click="navTo('/pagesRegion/freeze/freeze')">
						<image :src="$img_base_url('/mine/icon_5_9.png')" mode="widthFix"></image>
						<text>限时冻结</text>
					</view>

					<view class="m-item" @click="navTo('/pagesRegion/servicePersonnelReview/list')">
						<image :src="$img_base_url('/mine/icon_5_11.png')" mode="widthFix"></image>
						<text>服务者审核</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/certificateReview/certificateReview')">
						<image :src="$img_base_url('/mine/icon_5_18.png')" mode="widthFix"></image>
						<text>证书审核</text>
					</view>

					<view class="m-item" @click="navTo('/pagesRegion/dispatchCenter/dispatchCenter')">
						<image :src="$img_base_url('/mine/icon_5_7.png')" mode="widthFix"></image>
						<text>调度中心</text>
					</view>

					<view class="m-item" @click="navTo('/pagesRegion/consultationHotline/consultationHotline')">
						<image :src="$img_base_url('/mine/icon_5_10.png')" mode="widthFix"></image>
						<text>咨询电话</text>
					</view>

					<view class="m-item" @click="navTo('/pagesRegion/WeChatGroup/WeChatGroup')">
						<image :src="$img_base_url('/mine/icon_5_14.png')" mode="widthFix"></image>
						<text>企业微信群</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/bankCard/bankCard')">
						<image :src="$img_base_url('/mine/icon_5_13.png')" mode="widthFix"></image>
						<text>银行卡管理</text>
					</view>

					<!-- <view class="m-item" @click="navTo('/pagesRegion/majorClients/index')">
						<image :src="$img_base_url('/mine/icon_5_12.png')" mode="widthFix"></image>
						<text>大客户管理</text>
					</view> -->

					<view class="m-item" @click="navTo('/pagesRegion/nurseReview/nurseReview')">
						<image :src="$img_base_url('/mine/icon_5_16.png')" mode="widthFix"></image>
						<text>护理员审核</text>
					</view>

					<view class="m-item" @click="navTo('/pagesRegion/insuranceDetails/insuranceDetails')">
						<image :src="$img_base_url('/mine/icon_5_19.png')" mode="widthFix"></image>
						<text>保险明细</text>
					</view>
					<view class="m-item" @click="navTo('/pagesRegion/thaw/thaw')">
						<image :src="$img_base_url('/mine/icon_5_15.png')" mode="widthFix"></image>
						<text>解冻管理</text>
					</view>
				</view>
			</view>
		</view>

		<!-- <tarbar index="4" :page="module"></tarbar> -->
		<view class="" v-if="showTabbar">
			<Tarbar index="4" :page="module"></Tarbar>
		</view>
		<!-- <Tarbar index="4" page="1"></Tarbar> -->
	</view>
</template>

<script>

	import {
		getUserInfo
	} from "@/utils/api/userApi.js";
	export default {
		data() {
			return {
				showTabbar: false,
				topHeight: this.statusBarHeight + this.navBarHeight,
				module: "1",
				
				userInfo: null,
			};
		},
		mounted() {
			this.module = uni.getStorageSync("tarbarModule") ? uni.getStorageSync("tarbarModule") : 1;
			this.showTabbar = true;
			console.log(this.module);
			this.getInfo();
			
		},
		methods: {
			
			goPage(url, params) {
				if (params.tabbarPage) {
					uni.setStorageSync("tarbarModule", params.tabbarPage);
				}
				uni.navigateTo({
					url,
				});
			},
			getInfo() {
				getUserInfo().then((res) => {
					// console.log(res,'=-=-')
					this.userInfo = res.data.userinfo;

					uni.setStorageSync("userInfo", JSON.stringify(res.data.userinfo));
				});
			},
			toInfo() {
				uni.navigateTo({
					url: "/pages/mine/mine_info",
				});
			},
			navTo(url) {
				uni.navigateTo({
					url,
				});
			},
			toH5Url(url) {
				uni.navigateTo({
					url: "/pagesCourse/webview/webview?url=" + url,
				});
			},

			switchTo(url) {
				uni.setStorageSync("tarbarModule", 3);
				uni.navigateTo({
					url,
					fail(err) {
						console.log(err);
					},
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
	.container {
		.user-content {
			position: relative;
			height: 580rpx;
			box-sizing: border-box;

			.top-info {
				padding: 10rpx 32rpx 0;
				box-sizing: border-box;

				.top-bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					width: 100%;
					z-index: 0;
				}

				.user {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 1;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
					}

					.info {
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 20rpx;

						.name {
							font-weight: bold;
							font-size: 36rpx;
							color: #ffffff;
							line-height: 50rpx;
						}

						.phone {
							font-weight: 400;
							font-size: 28rpx;
							color: #ffffff;
							line-height: 40rpx;
							margin-top: 20rpx;
						}
					}
				}
			}

			.my_box_1 {
				display: flex;
				align-items: center;
				padding: 42rpx 58rpx 0;
				justify-content: space-between;
				box-sizing: border-box;
				position: relative;
				z-index: 1;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 76rpx;
						height: 76rpx;
					}

					text {
						font-weight: 400;
						font-size: 26rpx;
						color: #ffffff;
						line-height: 36rpx;
					}
				}
			}
		}

		.model-box {
			padding: 0 22rpx;
			box-sizing: border-box;
			margin-top: -60rpx;
			position: relative;
			z-index: 1;

			.wallet {
				width: 100%;
				height: 192rpx;
				position: relative;
				padding: 36rpx 36rpx 34rpx 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.box-bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					z-index: -1;
				}

				.left {
					display: flex;
					flex-direction: column;

					.num {
						font-weight: bold;
						font-size: 52rpx;
						color: #603815;
						line-height: 74rpx;

						text {
							font-size: 36rpx;
						}
					}

					&>text {
						font-weight: 400;
						font-size: 32rpx;
						color: #603815;
						line-height: 44rpx;
						margin-top: 4rpx;
					}
				}

				.right {
					width: 196rpx;
					height: 76rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					&>image {
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						z-index: -1;
					}

					text {
						font-weight: 400;
						font-size: 36rpx;
						color: #ecd3b1;
						line-height: 50rpx;
					}
				}
			}

			.my-box {
				background: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 20rpx;
				overflow: hidden;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 36rpx 24rpx 20rpx 28rpx;
					box-sizing: border-box;

					&>text {
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
						line-height: 44rpx;
					}

					.right {
						display: flex;
						align-items: center;

						text {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
							margin-right: 10rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.box-2 {
				.m-list {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 36rpx 30rpx 46rpx;
					box-sizing: border-box;
					border-top: 2rpx solid #eeeeee;

					.m-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 80rpx;
							height: 80rpx;
						}

						text {
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
							line-height: 36rpx;
							margin-top: 8rpx;
						}
					}
				}
			}

			.box-3 {
				.m-list {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					margin-bottom: 58rpx;
					grid-row-gap: 14rpx;

					// display: flex;
					// align-items: center;
					// flex-wrap: wrap;
					// justify-content: space-between;
					// padding: 0 10rpx 28rpx;
					.m-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						// margin: 0 20rpx 32rpx;

						image {
							width: 108rpx;
							height: 108rpx;
						}

						text {
							text-align: center;
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
							line-height: 36rpx;
						}
					}
				}
			}

			.box-4 {
				.m-list {
					width: calc(100% + 50rpx);
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: left;
					padding: 0 18rpx 30rpx;

					.m-item {
						width: 130rpx;
						margin-right: 50rpx;
						margin-bottom: 32rpx;

						image {
							width: 108rpx;
							height: 108rpx;
							margin: 0 auto;
						}

						text {
							display: block;
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
							line-height: 36rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>